<template>
  <el-dialog 
    :model-value="visible" 
    title="导入学员成绩" 
    width="50%" 
    destroy-on-close
    @update:model-value="$emit('update:visible', $event)"
  >
    <div class="import-section">
      <el-alert
        title="导入说明"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 20px;"
      >
        <template #default>
          <p>1. 请下载模板文件，按照模板格式填写学员成绩</p>
          <p>2. 支持 .xlsx 和 .xls 格式的文件</p>
          <p>3. 学号必须与系统中的学员学号一致</p>
          <p>4. 导入前请确保数据格式正确</p>
        </template>
      </el-alert>

      <div class="template-download">
        <el-button type="primary" @click="$emit('download-template')">
          <el-icon><Download /></el-icon> 下载模板
        </el-button>
      </div>

      <el-divider />

      <el-upload
        ref="uploadRef"
        :auto-upload="false"
        :limit="1"
        :on-change="handleFileChange"
        :on-exceed="handleExceed"
        accept=".xlsx,.xls"
        drag
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          将文件拖到此处，或<em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            只能上传 xlsx/xls 文件，且不超过 10MB
          </div>
        </template>
      </el-upload>

      <div class="import-actions">
        <el-button @click="$emit('update:visible', false)">取消</el-button>
        <el-button 
          type="primary" 
          @click="$emit('confirm-import')" 
          :loading="importing" 
          :disabled="!uploadFile"
        >
          <el-icon><Upload /></el-icon> 确认导入
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Download, Upload, UploadFilled } from '@element-plus/icons-vue'

export default {
  name: 'TeachingMissionScoreImportDialog',
  components: {
    Download,
    Upload,
    UploadFilled
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    importing: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:visible', 'download-template', 'confirm-import', 'file-change'],
  setup(props, { emit }) {
    const uploadRef = ref(null)
    const uploadFile = ref(null)

    // 文件选择
    const handleFileChange = (file) => {
      uploadFile.value = file
      emit('file-change', file)
    }

    // 文件超出限制
    const handleExceed = () => {
      ElMessage.warning('只能选择一个文件')
    }

    return {
      uploadRef,
      uploadFile,
      handleFileChange,
      handleExceed
    }
  }
}
</script>

<style scoped>
.import-section {
  padding: 20px 0;
}

.template-download {
  text-align: center;
  margin: 20px 0;
}

.import-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  gap: 10px;
}

:deep(.el-upload-dragger) {
  width: 100%;
}
</style>
